<template>
  <div class="wrap">
    <div class="inner w-1400">
      <div class="left-box">
        <!-- 导航列表 -->
        <div class="nav-box nav-box-1">
          <div class="nav-item nav-item-type-1" v-for="(item, index) in navList" :key="index">
            <template >
              <div class="nav-title"  @click="check_nav_class(item)">
                {{ item.title }}
              </div>
            </template>
         
          </div>
        </div>
      </div>
      <div class="right-box">
        <div class="nav-box nav-box-1">
          <div  class="nav-item nav-item-type-1" v-for="(item, index) in marketList" :key="index">
            <template >
              <router-link :to="item.route" class="nav-title">
                {{ item.title }}
              </router-link>
            </template>
         
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>


export default {
  name: "topNavModel",
 
  props: [],
  data() {
    return {
      categeroList:[]
    };
  },
  computed: {
   
    navList() {
      // var arr = [
      //   { title: "首页", route: "/engineeringHomePage" },
      //   { title: "工程总承包", route: "" },
      //   { title: "劳务分包", route: "" },
      //   { title: "专业分包", route: "" },
      //   { title: "基建材料", route: "" },
      //   { title: "装饰材料", route: "" },
      //   { title: "机电材料", route: "" },
      //   { title: "市政桥梁水利材料", route: "" },
      //   { title: "苗木花卉", route: "" },
      //   { title: "石材", route: "" },
      //   { title: "机械设备周转材", route: "" },
      // ];
      var arr = this.categeroList;

      return arr;
    },
    marketList() {
      var arr = [
        { title: "苗木花鸟市场", route: "/goodsAndServices?cat_id=17" },
        { title: "建材市场", route: "/goodsAndServices?cat_id=18" },
        { title: "家具家电市场", route: "/goodsAndServices?cat_id=19" },
      ];
      return arr;
    },
  },
  watch: {},

  created() {
    this.getProductCat();
   },

  methods: {
    getProductCat(){
      this.$httpApi("/api/getProductCat", {
        parent_id: 0
        },
         "get"
      )
        .then((res) => {
          this.categeroList = res.data;
        });
    },
    check_nav_class(item) {
      const categoryElement = document.getElementById('category-' + item.id);
      if (categoryElement) {
        categoryElement.scrollIntoView({ behavior: 'smooth', block: 'center' });
      }
      console.log(item)
      // let item_route = item.route;
      // if (item_route[0] == "/") {
      //   item_route = item_route.substr(1);
      // }
      // let obj = {
      //   active: item_route == this.$route.name,
      //   active: item.route == this.$route.path,
      // };
      // return obj;
    },
  },
};
</script>
<style scoped lang="less">
.wrap {
  height: 55px;
  background: var(--main_color);

  width: 100%;
  border-bottom: 1px solid var(--main_color);

  .inner {
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    .left-box {
      display: flex;
      align-items: center;
      height: 55px;

      .nav-box {
        transition: 0.5s;
        flex: 2;
        display: flex;
        justify-content: flex-start;

        .nav-item {
          
          margin-right: 24px;
          text-align: left;
          position: relative;
          cursor: pointer;
          
          .nav-title {
            font-family: PingFang SC, PingFang SC;
            font-weight: 600;
            font-size: 16px;
            color: #1A1A1A;
            line-height: 55px;
            text-align: left;
            font-style: normal;
            text-transform: none;
            padding-bottom: 13px;

            &.active {
              color: #31A41B;
              font-weight: bold;
              border-bottom:4px solid #31A41B;
            }
          }
        }
      }
    }
    .right-box {
      display: flex;
      align-items: center;
      height: 55px;

      .nav-box {
        transition: 0.5s;
        flex: 2;
        display: flex;
        justify-content: flex-start;

        .nav-item {
          margin-left: 24px;
          text-align: right;
          position: relative;
          cursor: pointer;
          .nav-title {
            font-family: PingFang SC, PingFang SC;
            font-weight: 600;
            font-size: 14px;
            color: #2E323F;
            line-height: 55px;
            text-align: left;
            font-style: normal;
          }
        }
      }
    }
  }
}

</style>
